<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="block">
				<span class="demonstration">默认不区分颜色</span>
				<el-rate v-model="value1"></el-rate>
			</div>
			<div class="block">
				<span class="demonstration">区分颜色</span>
				<el-rate v-model="value2" :colors="colors">
				</el-rate>
			</div>
			<hr />

			<el-rate v-model="value" show-text>
			</el-rate>
			<hr />

			<el-rate
			  v-model="value3"
			  disabled
			  show-score
			  text-color="#ff9900"
			  score-template="{value}">
			</el-rate>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				value1: null,
				value2: null,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				value: null,
				value3: 3.7
			}
		})
	</script>

</html>